cell-out-transition = cubic-bezier(0.83,-0.37, 1, 1)
cell-in-transition = cubic-bezier(0, 0, 0.39, 1)
// cell-out-transition = ease-in
// cell-in-transition = ease-out
transition-out-duration = 1s
transition-in-duration = 0.8s
.wrapper-screen
  height 100vh 
  font-family 'yuanti'
  display flex
  .left-box
    box-sizing border-box
    width 23vw
    height 100%
    background #ededf3
    padding 6.1vh 2.4vw 0
    .name-title
      color #423b45
      .mini-title
        font-size 22px
      .title
        font-size 28px
        margin-top 6px
    .top5-wrap
      margin-top 4.7vh
      .title
        font-size 33px
        color #423b45
      .top5-list
        margin-top 3.3vh
        .top5-item
          display flex
          justify-content center
          align-items center
          margin-bottom 16px
          .circle-area
            flex 0 0 28px
            display flex
            flex-direction column
            justify-content center
            .circle
              width 6px
              height 6px
              border 2px solid #7474b9
              border-radius 100%
          .item-title
            flex 1 1 auto
            font-size 19px
            letter-spacing 2px
          .vote-num
            flex 0 0 56px
            margin-left 16px
            font-size 19px



  .right-box
    width 77vw
    box-sizing border-box
    height 100%
    background #f6f5fa
    padding 6.1vh 5.8vw 0
    overflow hidden
    .header
      display flex
      justify-content space-between
      align-items flex-end
      .left
        .main-title
          font-size 40px
          color #423b45
          letter-spacing 4px
      .right
        .total-vote-board
          .text
            color #b1b4be
            font-size 14px
            text-align right
            margin-bottom 4px
    .table
      margin-top 5.6vh
      .rank
        flex 117 117 10px
      .project-title
        flex 717 717 10px
        padding-right 100px
      .leader
        flex 270 270 10px
      .vote-num
        flex 102 102 10px
      .table-head
        display flex
        box-sizing border-box
        width 65.4vw
        padding 0 0 6px 32px 
        border-bottom 1px solid #b1b4be
        .text
          font-size 22px
          letter-spacing 2.6px
          color #b1b4be
      .list-wrap
        .project-list
          position relative
          left 0
          right 0
          .project-item
            position absolute
            display flex
            align-items center
            box-sizing border-box
            width 65.4vw
            height 10.4vh
            align-items center
            background #ffffff
            margin-top 1.8vh
            padding 0 0 0 32px 
            border-radius 6px
            .text-rank
              font-size 33px
              color #9b9ca2
            .text-project-item
              // flex-direction column
              // justify-content center
              // height 48px
              line-height 28px
              font-size 22px
              color #595b62
              letter-spacing 1px
            .text-leader
              font-size 22px
              color #595b62
            .text-vote-num
              font-size 26px
              color #d0564c
          
        
  .item-0
    top 0px
  .item-1
    top 12vh
  .item-2
    top 24vh
  .item-3
    top 36vh
  .item-4
    top 48vh
  .item-5
    top 60vh
  .current
    transform translateX(0)
    transition left .5s linear, top .5s linear
  .previous
    transform translateX(-77vw)
  .next
    transform translateX(77vw)
  .previous:nth-of-type(1) {
    transition: transform transition-out-duration cell-out-transition 0s;
  }
  .previous:nth-of-type(2) {
    transition: transform transition-out-duration cell-out-transition .1s;
  }
  .previous:nth-of-type(3) {
    transition: transform transition-out-duration cell-out-transition .2s;
  }
  .previous:nth-of-type(4) {
    transition: transform transition-out-duration cell-out-transition .3s;
  }
  .previous:nth-of-type(5) {
    transition: transform transition-out-duration cell-out-transition .4s;
  }
  .previous:nth-of-type(6) {
    transition: transform transition-out-duration cell-out-transition .5s;
  }
  .current-withTransition:nth-of-type(6n+1) {
    transition: transform transition-in-duration cell-in-transition 1s;
  }
  .current-withTransition:nth-of-type(6n+2) {
    transition: transform transition-in-duration cell-in-transition 1.1s;
  }
  .current-withTransition:nth-of-type(6n+3) {
    transition: transform transition-in-duration cell-in-transition 1.2s;
  }
  .current-withTransition:nth-of-type(6n+4) {
    transition: transform transition-in-duration cell-in-transition 1.3s;
  }
  .current-withTransition:nth-of-type(6n+5) {
    transition: transform transition-in-duration cell-in-transition 1.4s;
  }
  .current-withTransition:nth-of-type(6n+6) {
    transition: transform transition-in-duration cell-in-transition 1.5s;
  }
  .wrap-2
    display:-webkit-box; 
    overflow:hidden; 
    text-overflow:ellipsis;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 